<template>
  <div class="bread-crumb" v-if="thisRoute !== '/dashboard'">
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
          <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.title }}</span>
          <a v-else @click.prevent="routerLink(item)">{{ item.title }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script setup>
  import {useRouter} from 'vue-router'
  import {computed} from 'vue'
  import {findParent} from "@/utils/setting";
  import {useStore} from 'vuex'

  const store = useStore()
  const router = useRouter()

  // const levelList = computed(() => {return router.currentRoute.value.matched})
  const levelList = computed(() => {return findParent(store.getters.menus,router.currentRoute.value.meta.id)})
  const thisRoute = computed(() => {return router.currentRoute.value.path})
  // eslint-disable-next-line no-unused-vars
  const pathCompile = (item) => {
    if(item.children && item.children.length > 0 && item.type === 1) {
      return pathCompile(item.children[0])
    }else {
      return item.path
    }
  }
  const routerLink = (item) => {
    console.log(item)
    const { redirect } = item
    if (redirect) {
      router.push(redirect)
      return
    }
    let _path = pathCompile(item)
    router.push(_path)
  }
</script>

<style lang="scss" scoped>
  .bread-crumb{
    height: 40px;
    background-color: $backBase;
    padding-left: 10px;
    display: flex;align-items: center;
    ::v-deep(.el-breadcrumb__item){
      .el-breadcrumb__inner a{
        font-weight: normal;
        color: $black_tips;
        &:hover{
          color: $black;
        }
      }
      .el-breadcrumb__separator{
        font-weight: normal;
        color: $black_tips;
        margin: 0 5px;
      }
    }
    ::v-deep(.el-breadcrumb__item):last-child .el-breadcrumb__inner{
      color: $black_tips;
      font-weight: normal;
    }
    .breadcrumb-move, /* 对移动中的元素应用的过渡 */
    .breadcrumb-enter-active,
    .breadcrumb-leave-active {
      transition: all 0.5s ease;
    }

    .breadcrumb-enter-from,
    .breadcrumb-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }
    /* 确保将离开的元素从布局流中删除
      以便能够正确地计算移动的动画。 */
    .breadcrumb-leave-active {
      display: none;
    }
  }
</style>
